<template>
  <div class="page page_timeline w100 h100 radius8">
    <el-button
      v-if="authority"
      class="add_timeline"
      type="primary"
      @click="dialogVisible = true"
    >
      新增
    </el-button>
    <template v-if="timelineList.length>0">
      <el-timeline>
        <el-timeline-item v-for="o in timelineList" :key="o.id" :timestamp="o.pointTime" placement="top">
          <el-card v-if="o.complexity">
            <h4 class="title">{{ o.title }}</h4>
            <p>{{ o.content }}</p>
          </el-card>
          <span v-else>{{ o.content }}</span>
        </el-timeline-item>
      </el-timeline>
    </template>
    <el-empty description="暂无数据" v-else />

    <el-dialog
      v-model="dialogVisible"
      title="新增经历"
      width="40vw"
      :before-close="handleClose"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="auto"
        status-icon
      >
        <el-form-item label="日期：" prop="point_time">
          <el-date-picker
            v-model="form.point_time"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择"
            clearable
          />
        </el-form-item>
        <el-form-item label="标题：" prop="title">
          <el-input v-model="form.title" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="内容：" prop="content">
          <el-input
            v-model="form.content"
            type="textarea"
            :rows="6"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleConfirm"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getTimelineList, postTimelineAdd } from "@/api/blog/timeline"
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Timeline",
  props: {},
  components: {},
  emit: [],
  data() {
    return {
      dialogVisible: false,
      timelineList: [],
      form: {
        point_time: "",
        title: "",
        content: ""
      },
      form_: {},
      rules: {
        point_time: [
          { required: true, message: "请选择日期", trigger: "blur" }
        ],
        title: [{ max: 32, message: "标题最大长度32个字符", trigger: "blur" }],
        content: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { max: 1024, message: "内容最大长度1024个字符", trigger: "blur" }
        ]
      }
    }
  },
  computed: {
    userRole(){
      return this.$store.getters['user/userRole']
    },
    authority(){
      return this.userRole === 'admin'
    }
  },
  watch: {},
  methods: {
    async getTimelineList() {
      const { code, msg, data } = await getTimelineList()
      if (code !== 200) {
        return this.$message.error(msg)
      }
      this.timelineList = data.map(o=>{
        return {
          ...o,
          pointTime:this.$moment(o.pointTime).format('YYYY-MM-DD')
        }
      })
    },
    handleClose() {
      this.$refs.formRef.resetFields()
      this.dialogVisible = false
    },
    handleConfirm() {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          const { code, msg } = await postTimelineAdd(this.form)
          if (code === 200) {
            this.$message.success("新增成功！")
            this.getTimelineList()
            this.handleClose()
          } else {
            this.$message.error(msg)
          }
        }
      })
    }
  },
  created() {
    this.form_ = this.$_.cloneDeep(this.form)
  },
  mounted() {
    this.getTimelineList()
  }
}
</script>

<style lang="scss" scoped>
.page_timeline {
  position: relative;
  .add_timeline {
    position: fixed;
    top: 95px;
    right: 40px;
    z-index: 3;
  }
  .el-timeline {
    position: relative;
    margin-left: 50%;
    z-index: 2;
    .el-timeline-item {
      width: 40vw;
      .title {
        line-height: 1.5em;
      }
      &:nth-child(odd) {
        ::v-deep .el-timeline-item__node {
          background: $success;
        }
        ::v-deep .el-timeline-item__wrapper {
          left: -100%;
          padding-right: 28px;
          padding-left: 0;
          text-align: right;
        }
      }
      &:nth-child(even) {
        ::v-deep .el-timeline-item__node {
          background: $danger;
        }
      }
    }
  }
}
</style>

